/**
 * Created by dean on 2017/10/15.
 */
import React, {Component} from "react";
import {Panel, Form, FormControl, FormGroup, Col, ControlLabel, Checkbox, Button} from "react-bootstrap";

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clickProps: {
                display: 'block'
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.hide) {
            this.setState(
                {
                    clickProps: {
                        display: 'none',
                    }
                }
            );
        }
    }

    hide() {
        this.setState(
            {
                clickProps: {
                    display: 'none',
                }
            }
        )
    }

    show() {
        this.setState(
            {
                clickProps: {
                    display: 'block',
                }
            }
        )
    }

    render() {
        return (
            <Panel id="loginForm" display="{this.state.clickProps.display}">
                <Form horizontal action="/signin" method="post">
                    <FormControl name="_xsrf" value="xxxxxxxxx" type="hidden"></FormControl>
                    <FormControl name="once" value="xxxxxxxxx" type="hidden"></FormControl>

                    <FormGroup controlId="formHorizontalEmail">
                        <Col componentClass={ControlLabel} sm={3}>
                            User Name
                        </Col>
                        <Col sm={9}>
                            <FormControl name="Username" type="text" placeholder="Enter user name here"/>
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="formHorizontalPassword">
                        <Col componentClass={ControlLabel} sm={3}>
                            Password
                        </Col>
                        <Col sm={9}>
                            <FormControl name="Password" type="password" placeholder="Enter password here"/>
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={3} sm={9}>
                            <Checkbox>Remember me</Checkbox>
                        </Col>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={3} sm={9}>
                            <Button type="submit">
                                Sign in
                            </Button>
                        </Col>
                    </FormGroup>
                </Form>
            </Panel>
        )
    }
}

export {LoginForm}